<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>宫颈黏液</title>

  <script src="js/common/echarts.js"></script> 
  <script type="text/javascript" src="js/common/dateUtil.js"></script> 
  <script type="text/javascript" src="js/common/mapUtil.js"></script>	
  <script type="text/javascript" src="js/common/string2Map.js"></script>
   
  <script type="text/javascript" src="js/common/periodUtil.js"></script>
  <script type="text/javascript" src="js/mucus/initMucusChartData.js"></script> 
  <script type="text/javascript" src="js/mucus/swipe.js"></script>
  <script type="text/javascript" src="js/mucus/drawMucusChart.js"></script> 
  <script type="text/javascript" src="js/mucus/mucusDetail.js"></script> 
  <script type="text/javascript" src="js/common/detailUtil.js"></script>
  <link href="css/scroll.css" rel="stylesheet" type="text/css">	
</head>

<body style="margin:0px;padding:0px; overflow-x: hidden; overflow-y: hidden">
	
	<div id="div_fix_zone" style="overflow: hidden;">
		<div id="div_scroll_zone" style="overflow: scroll;overflow-y:hidden"> 
			
			<div id="mucusChartYAxis" style="text-align:right;position:absolute; z-index:999; margin-left:1px; font-size:10px; font-weight:1; color:#000; font-family:'微软雅黑'">                
            	<table id="mucusChartYAxisTable">	
            		<tr> <td style="vertical-align:middle;text-align: center;">蛋清/<br>水状 </td> </tr>
            		<tr> <td style="vertical-align:middle;text-align: center;">粘稠/<br>乳脂状</td> </tr>
            		<tr> <td style="vertical-align:middle;text-align: center;">潮湿</td> </tr>
            		<tr> <td style="vertical-align:middle;text-align: center;">无/<br>干燥</td> </tr>
			    </table>
            </div>
                      
			<div id="mucusChart">			
			</div> 	
					
		</div>
	</div>
	
    <table id="detail_table" style="text-align:center; margin-left:auto; margin-right:auto;font-family:'微软雅黑'">
  	<tr style="width:100%">
    	<td id="periodDayNum_td">
        	<div id="periodDayNum_div" style="color:#666461">
            	周期第<span id="periodDayNum" style="color:#d27ce1"></span>天
            </div>
        </td>
        <td id="detail_td" style="background-color:#d17be0">
        	<div id="detail_div">
                <div id="detail_div2">
                    <img id="heart" alt="heart" src="img/detailCircle/heart.png"/>
                    <img id="moon" alt="moon" src="img/detailCircle/moon.png"/>
                    <img id="drink" alt="drink" src="img/detailCircle/drink.png"/>
                    <img id="medicine" alt="medicine" src="img/detailCircle/medicine.png"/>
                    <img id="plane" alt="plane" src="img/detailCircle/plane.png"/>
                </div>
                <div id="detailMucus" style="margin:2.5%;font-size:110%;color:#FFF">  </div>
                <div id="detailDate" style="font-size:110%;color:#72407b"> </div>
                <div id="detailDayOfWeek" style="color:#72407b">  </div>
            </div>
        </td>
        <td id="periodDayTitle_td">
        	<div id="periodDayTitle_div">
        		<img alt="periodDayTitle" id="periodDayTitle" style=" width:90%"/>
            </div>
        </td>
    </tr>
  </table>
  
  <script type="text/javascript">
  
  var customerDatePeriodMap = new Map(); 
  var customerDateHeartMap  = new Map();
  var customerDateMoonMap  = new Map();
  var customerDateMedicineMap = new Map();
  var customerDateDrinkMap = new Map();
  var customerDatePlaneMap = new Map();  		
  var customerDateMucusMap = new Map();
  
  setTimeout('firstShowMucusChart()', 200);
  
  function firstShowMucusChart(){
  	initCustomerData();
  	initMucusChartData();
  	
    setEChartConfig();
	drawMucusChart();
	initSwipe(); 
	
	firstShowMucusChartDetail();
  }
    
  function initCustomerData(){  	   
      var customerDatePeriodStr = localStorage.getItem("customerDatePeriodKey");
	  var customerDateHeartStr = localStorage.getItem("customerDateHeartKey");
	  var customerDateMoonStr = localStorage.getItem("customerDateMoonKey");
	  var customerDateMedicineStr = localStorage.getItem("customerDateMedicineKey");
	  var customerDateDrinkStr = localStorage.getItem("customerDateDrinkKey");
	  var customerDatePlaneStr = localStorage.getItem("customerDatePlaneKey");
      var customerDateMucusStr = localStorage.getItem("customerDateMucusKey");
    
      customerDatePeriodMap = getDatePeriodMap(customerDatePeriodStr);
	  customerDateHeartMap = getDateHeartMap(customerDateHeartStr);
	  customerDateMoonMap = getDateMoonMap(customerDateMoonStr);
	  customerDateMedicineMap = getDateMedicineMap(customerDateMedicineStr);
	  customerDateDrinkMap = getDateDrinkMap(customerDateDrinkStr);
	  customerDatePlaneMap = getDatePlaneMap(customerDatePlaneStr);
	  customerDateMucusMap = getDateMucusMap(customerDateMucusStr);    
  }   
  
  </script> 
 	
</body>
</html>